<template>
  <view class="pay-container">
     <!-- 头部，关闭按钮和标题 -->
       <view class="pay-header">
         <button class="close-btn" @click="goToCompletionPage">×</button>
         <text class="pay-title">请输入支付密码</text>
       </view>

    <!-- 支付金额显示 -->
    <view class="pay-amount-section">
      <text class="service-name">上门维修</text>
      <text class="pay-amount">278.00<span class="currency">元</span></text>
    </view>

    <!-- 付款方式显示 -->
    <view class="pay-method" @click="toggleDropdown">
      <text class="method-label">付款方式</text>
      <view class="method-detail">
        <text>{{ selectedMethod }}</text>
        <text class="dropdown-arrow">▼</text>
      </view>
    </view>

    <!-- 下拉菜单显示 -->
    <view v-if="dropdownVisible" class="dropdown">
      <view class="dropdown-item" v-for="method in paymentMethods" :key="method" @click="selectMethod(method)">
        {{ method }}
      </view>
    </view>

    <!-- 输入支付密码框 -->
    <view class="password-input">
      <input v-for="i in 6" :key="i" class="password-box" type="password" maxlength="1" />
    </view>

    <!-- 键盘 -->
    <view class="keyboard">
      <!-- 数字键盘1到9 -->
      <button class="key" v-for="n in 9" :key="n" @click="inputKey(n)">{{ n }}</button>
      
      <!-- 占位符号，使键盘最后一行中0位于正中央 -->
      <button class="key zero-key" @click="inputKey(0)">0</button>

      <!-- 删除按键，红色×，放在9的下面 -->
      <button class="key delete" @click="deleteKey">×</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      dropdownVisible: false, // 控制下拉菜单是否显示
      selectedMethod: '中国银行储蓄卡(8883)', // 默认选择的支付方式
      paymentMethods: ['中国银行储蓄卡(8883)', '零钱支付'] // 支付方式选项
    };
  },
  methods: {
	   // 跳转到支付完成页面
	      goToCompletionPage() {
	        uni.navigateTo({
	          url: '/pages/index/order/CompletionPage' // 假设支付完成页面路径为
	        });
	      },
    toggleDropdown() {
      // 切换下拉菜单的显示状态
      this.dropdownVisible = !this.dropdownVisible;
    },
    selectMethod(method) {
      // 选择支付方式
      this.selectedMethod = method;
      this.dropdownVisible = false; // 选定后关闭下拉菜单
    },
    inputKey(n) {
      // 输入数字的逻辑
    },
    deleteKey() {
      // 删除输入的逻辑
    }
  }
};
</script>

<style scoped>
/* 外部容器 */
.pay-container {
  padding: 20px;
  background-color: #fff;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* 头部样式 */
.pay-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  position: relative;
}

.close-btn {
  position: absolute;
  left: 0;
  font-size: 24px;
  background: none;
  border: none;
  cursor: pointer;
}

.pay-title {
  font-size: 18px;
  text-align: center;
  flex-grow: 1;
}

/* 金额和服务名称样式 */
.pay-amount-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.service-name {
  font-size: 16px;
  color: #888;
}

.pay-amount {
  font-size: 36px;
  color: #000;
}

.currency {
  font-size: 24px;
}

/* 付款方式 */
.pay-method {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  cursor: pointer;
  position: relative;
}

.method-detail {
  display: flex;
  align-items: center;
}

.dropdown-arrow {
  margin-left: 5px;
  font-size: 12px;
}

/* 下拉菜单样式 */
.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: #fff;
  border: 1px solid #ddd;
  z-index: 10;
}

.dropdown-item {
  padding: 10px;
  font-size: 16px;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
}

.dropdown-item:hover {
  background-color: #f0f0f0;
}

/* 密码输入框 */
.password-input {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.password-box {
  width: 40px;
  height: 40px;
  text-align: center;
  font-size: 24px;
  border: 1px solid #ddd;
}

/* 键盘样式 */
.keyboard {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.key {
  width: 30%;
  padding: 15px;
  margin: 10px 0;
  text-align: center;
  background-color: #f0f0f0;
  border: none;
  border-radius: 4px;
  font-size: 24px;
}

.zero-key {
  width: 60%; /* 0 占据两个格子的宽度 */
}

.delete {
  background-color: #ff4d4f;
  color: #fff;
  width: 30%; /* 删除键在最后一行右侧 */
}
</style>
